PlutoUI.combine(render_function::Function)Combine multiple input elements into one. The combined values are sent to @bind as a single tuple.
render_function is a function that you write yourself, take a look at the examples below.
Examples
🐶 & 🐱
We use the do syntax to write our render_function. The Child function is wrapped around each input, to let combine know which values to combine.
@bind values PlutoUI.combine() do Child
md"""
# Hi there!
I have $(
Child(Slider(1:10))
) dogs and $(
Child(Slider(5:100))
) cats.
Would you like to see them? $(Child(CheckBox(true)))
"""
end
values == (1, 5, true) # (initially)The output looks like:
🎏
The combine function is most useful when you want to generate your input elements dynamically. This example uses HypertextLiteral.jl for the @htl macro:
function wind_speeds(directions)
PlutoUI.combine() do Child
@htl("""
<h6>Wind speeds</h6>
<ul>
$([
@htl("<li>$(name): $(Child(Slider(1:100)))</li>")
for name in directions
])
</ul>
""")
end
end
@bind speeds wind_speeds(["North", "East", "South", "West"])
speeds == (1, 1, 1, 1) # (initially)
# after moving the sliders:
speeds == (100, 36, 73, 60)The output looks like:
Named variant
In the last example, we used Child to wrap around contained inputs:
Child(Slider(1:100))We can also use the named variant, which looks like:
Child("East", Slider(1:100))When you use the named variant for all children, the bound value will be NamedTuple, instead of a Tuple.
Let's rewrite our example to use the named variant:
function wind_speeds(directions)
PlutoUI.combine() do Child
@htl("""
<h6>Wind speeds</h6>
<ul>
$([
@htl("<li>$(name): $(Child(name, Slider(1:100)))</li>")
for name in directions
])
</ul>
""")
end
end
@bind speeds wind_speeds(["North", "East", "South", "West"])
speeds == (North=1, East=1, South=1, West=1) # (initially)
# after moving the sliders:
speeds == (North=100, East=36, South=73, West=60)
md"The Eastern wind speed is $(speeds.East)."The output looks like:
Why?
You can make a new widget!
You can use combine to create a brand new widget yourself, by combining existing ones!
In the example above, we created a new widget called wind_speeds. You could put this function in a package (e.g. WeatherUI.jl) and people could use it like so:
import WeatherUI: wind_speeds
@bind speeds wind_speeds(["North", "East"])In other words: you can use combine to create application-specific UI elements, and you can put those in your package!
Difference with repeated @bind
The standard way to combine multiple inputs into one output is to use @bind multiple times. Our initial example could more easily be written as:
md"""
# Hi there!
I have $(@bind num_dogs Slider(1:10)) dogs and $(@bind num_cats Slider(5:10)) cats.
Would you like to see them? $(@bind want_to_see CheckBox(true))
"""The combine function is useful when you are generating inputs dynamically, like in our second example. This is useful when:
The number of parameters is very large, and you don't want to write
@bind parameter1 ...,@bind parameter2 ..., etc.The number of parameters is dynamic! For example, you can load in a table in one cell, and then use
combinein another cell to select which rows you want to use.